/*!
 * jquery.dialog - https://github.com/zx648383079/ZoDream.UI
 * Version - 1.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 ZoDream
 */

@import "prefix";
@import "loading";

.fa {
    &.fa-close {
        &::before {
            content: "\f00d";
        }
    }
}

.dialog-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 910;
    display: none;
    &.dialog-bg-private {
        position: absolute;
        z-index: 900;
        display: block;
    }
}

.dialog {
    position: fixed;
    z-index: 920;
    &.dialog-private {
        position: absolute;
        z-index: 919;
    }
    &.dialog-tip,
    &.dialog-pop {
        background: rgba(0, 0, 0, .6);
        color: #fff;
        max-width: 66.66%;
        min-width: 100px;
        padding: 5px 10px;
        text-align: center;
        @include prefix-animation(dialog-tip 1s both);
        @include prefix-content(transition, top 1s);
    }
    &.dialog-message {
        background: rgba(0, 0, 0, .6);
        color: #fff;
        max-width: 33.33%;
        min-width: 100px;
        padding: 5px 10px;
        right: 0;
        @include prefix-animation(dialog-message .5s);
        @include prefix-content(transition, top 1s);
    }
    &.dialog-loading {}
    &.dialog-pop {
        bottom: auto;
        &:before {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border: transparent 20px solid;
        }
        &.dialog-pop-top,
        &.dialog-pop-leftTop,
        &.dialog-pop-center,
            {
            &:before {
                bottom: -40px;
                left: 50%;
                margin-left: -20px;
                border-top-color: rgba(0, 0, 0, .6);
            }
        }
        &.dialog-pop-left,
        &.dialog-pop-leftBottom {
            &:before {
                right: -40px;
                margin-top: -20px;
                top: 50%;
                border-left-color: rgba(0, 0, 0, 0.6);
            }
        }
        &.dialog-pop-bottom,
        &.dialog-pop-rightBottom {
            &:before {
                top: -40px;
                left: 50%;
                margin-left: -20px;
                border-bottom-color: rgba(0, 0, 0, .6);
            }
        }
        &.dialog-pop-right,
        &.dialog-pop-rightTop {
            &:before {
                left: -40px;
                margin-top: -20px;
                top: 50%;
                border-right-color: rgba(0, 0, 0, 0.6);
            }
        }
    }
    &.dialog-page,
    &.dialog-content,
    &.dialog-box,
    &.dialog-form,
    &.dialog-disk {
        background: #fff;
        min-width: 260px;
        display: none;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        @include prefix-animation(dialog-box 0.5s);
        .dialog-header {
            position: relative;
            background: #333;
            color: #fff;
            height: 40px;
            line-height: 30px;
            text-align: center;
            padding: 5px 10px;
            border-bottom: 1px solid #ccc;
            .dialog-title {
                cursor: move;
            }
            .fa {
                width: 30px;
                height: 30px;
                border: none;
                position: absolute;
                top: 0;
                color: #fff;
                line-height: 30px;
            }
            .fa-arrow-left {
                left: 0;
                background: #333;
                color: #fff;
                top: 5px;
            }
            .dialog-close {
                right: 0;
                background: #333;
                color: #fff;
                top: 6px;
                &:hover {
                    @include prefix-content(transform, rotateZ(180deg));
                }
            }
        }
        .dialog-body {
            min-height: 100px;
            overflow: auto;
            padding: 10px;
        }
        .dialog-footer {
            button {
                width: 50%;
                border: none;
                line-height: 30px;
                background: #333;
                color: #fff;
                padding: 0;
                margin: 0;
                &:focus {
                    outline: -webkit-focus-ring-color auto 0px;
                }
            }
            .dialog-yes {
                width: 30%;
                background: #333;
                color: #fff;
                padding: 3px;
                border: none;
                margin-right: 5px;
                line-height: 30px;
            }
            .dialog-close {
                width: 30%;
                background: #333;
                color: #fff;
                padding: 3px;
                border: none;
                line-height: 30px;
            }
        }
    }
    &.dialog-box,
    &.dialog-form,
    &.dialog-content {
        .dialog-header {
            .dialog-title {
                text-align: left;
            }
        }
        .dialog-footer {
            border-top: 1px solid #ccc;
            padding: 2px;
            text-align: right;
        }
    }
    &.dialog-content {
        top: 0;
        left: 0;
        right: 0;
        .dialog-body {}
        .dialog-footer {
            text-align: center
        }
    }
    &.dialog-page {
        top: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        .dialog-header {
            .dialog-close {
                background: #333;
                color: #fff;
                top: 6px;
            }
        }
        .dialog-body {
            position: absolute;
            bottom: 40px;
            width: 100%;
            top: 40px;
        }
        .dialog-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center
        }
    }
    &.dialog-form {
        .dialog-body {
            input,
            textarea {
                font-size: 20px;
                width: 100%;
                box-sizing: border-box;
                border: none;
                border-bottom: 1px solid #333;
                padding: 5px;
            }
            label {
                font-size: 20px;
            }
            select {
                font-size: 20px;
                width: 100px;
                float: right;
                border: none;
                border-bottom: 1px solid #333;
                padding: 5px;
            }
        }
    }
    &.dialog-box {}
    &.dialog-image {
        @include prefix-content(transition, all 1s);
        .dialog-previous,
        .dialog-next,
        .dialog-close {
            position: absolute;
            font-size: 30px;
            display: none;
        }
        .dialog-previous,
        .dialog-next {
            top: 50%;
            margin-top: -15px;
        }
        .dialog-previous {}
        .dialog-body {
            img {}
        }
        .dialog-next {
            right: 0;
        }
        .dialog-close {
            right: 0;
            top: 0;
        }
        &:hover {
            .dialog-previous,
            .dialog-next,
            .dialog-close {
                display: block;
            }
        }
    }
    &.dialog-disk {
        .dialog-body {
            min-width: 300px;
            min-height: 500px;
            position: relative;
            .dialog-catalog {
                width: 100px;
                display: inline-block;
                top: 0;
                bottom: 0;
                left: 0;
                overflow: auto;
                ul {
                    margin: 0;
                    padding: 0;
                    li {
                        list-style: none;
                    }
                }
                .tree {
                    .tree-item {
                        .tree-header {
                            line-height: 30px;
                            text-align: center;
                        }
                        .tree-child {
                            margin-left: 15px;
                            display: none;
                            .tree-item {}
                        }
                        &.active,
                        &:hover {
                            >.tree-header {
                                color: #fff;
                                background: #337ab7;
                            }
                        }
                        &.active {
                            .tree-child {
                                display: block;
                            }
                        }
                    }
                }
            }
            .dialog-content {
                display: inline-block;
                position: absolute;
                left: 120px;
                right: 0;
                top: 0;
                bottom: 0;
                overflow-y: auto;
                .folder-item,
                .file-item {
                    display: inline-block;
                    width: 100px;
                    text-align: center;
                    padding: 20px 5px;
                    box-sizing: border-box;
                    .fa {
                        font-size: 40px;
                    }
                    &.active,
                    &:hover {
                        border: 1px solid #337ab7;
                        color: #337ab7;
                    }
                }
            }
        }
        .dialog-footer {
            text-align: center
        }
    }
    &.dialog-closing {
        @include prefix-animation(dialog-closing .5s);
    }
}

@include prefix-keyframes(dialog-message) {
    0% {
        @include prefix-content(transform, scaleY(0.1));
    }
    45% {
        @include prefix-content(transform, scaleY(1.3));
    }
    80% {
        @include prefix-content(transform, scaleY(0.8));
    }
    100% {
        @include prefix-content(transform, scaleY(1));
    }
}

@include prefix-keyframes(dialog-box) {
    0% {
        @include prefix-content(transform, scale(0.7));
    }
    45% {
        @include prefix-content(transform, scale(1.05));
    }
    80% {
        @include prefix-content(transform, scale(0.95));
    }
    100% {
        @include prefix-content(transform, scale(1));
    }
}

@include prefix-keyframes(dialog-tip) {
    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        @include prefix-content(transform, translate3d(0, 3000px, 0));
    }
    60% {
        opacity: 1;
        @include prefix-content(transform, translate3d(0, -20px, 0));
    }
    75% {
        @include prefix-content(transform, translate3d(0, 10px, 0));
    }
    90% {
        @include prefix-content(transform, translate3d(0, -5px, 0));
    }
    to {
        @include prefix-content(transform, translate3d(0, 0, 0));
    }
}

@include prefix-keyframes(dialog-closing) {
    0% {
        opacity: 1;
        @include prefix-content(transform, scale(1));
    }
    20% {
        @include prefix-content(transform, scale(1.2));
    }
    55% {
        @include prefix-content(transform, scale(0.8));
    }
    100% {
        opacity: 0;
        @include prefix-content(transform, scale(.2));
    }
}
